<template>
  <div class="container">
    <div class="row">
      <div class="col-sm-6 offset-sm-3">
        <img src="../assets/vote2.png">
        <br>
        <br>
        <button ref="voteBtn" type="button" class="btn btn-primary"
         @click="onVote">开始投票</button>
        <button type="button" class="btn btn-primary"
         @click="onResult">查看结果</button>
      </div>
    </div>
    <br>
    <div class="col-sm-6 offset-sm-3">
      <votecontent v-if="isVoting" :options="options" :getData="getVote"
        @submit="onSubmit"></votecontent>
      <voteresult v-else :getData="getResult" :results="results"></voteresult>
    </div>
    <div>
      <b-modal ref="alertModal" id="modal1" title="已投票">
          <p class="my-4">请您不要重复投票，谢谢！</p>
      </b-modal>
    </div>
</div>
</template>

<script>
import axios from 'axios'
import VoteContent from './VoteContent'
import VoteResult from './VoteResult'
export default {
  name: 'Vote',
  data () {
    return {
      votes: [],
      results: [],
      isVoting: true,
      voted: false,
      options: []
    }
  },
  methods: {
    getVote() {
      const path = '/votes/'
      axios.get(path).then(
        (res) => {
          this.votes = res.data.votes
          this.options = []
          for (let vote of this.votes) {
            let opt = {
              'text': vote.name + ' ' + vote.prj,
              'value': vote.name
            }  
            this.options.push(opt) 
          }
        }
      ).catch(
        (error) => {
          console.log(error)
        }
      )
    },
    getResult() {
      const path = '/votes/'
      axios.get(path).then(
        (res) => {
          let votes = res.data.votes
          this.results = []
          for(let vote of votes) {
            let res = {
              'name': vote.name,
              'value': vote.vote
            } 
            this.results.push(res)
          }
        }
      ).catch(
        (error) => {
          console.log(error)
        }
      )
    },
    updateVote(teamName) {
      const path = '/votes/'
      const payload = {'name': teamName}
      axios.post(path, payload).then(
        (res) => {
          this.isVoting = false
          this.voted = true
          this.setCookie('vote', 'jiubugaosuni', 3)
        }
      ).catch(
        (error) => {
          console.log(error)
        }
      )
    },
    onVote() {
      this.isVoting = true
    },
    onResult() {
      this.isVoting = false
    },
    onSubmit(name) {
      if (this.voted || this.getCookie('vote') == 'jiubugaosuni') {
        // alert('您已投票，请不要重复投票，谢谢！')
        this.$refs.alertModal.show()
      } else {
        this.updateVote(name)
      }
    },
    //设置cookie
    setCookie: function (cname, cvalue, exdays) {
      var d = new Date();
      d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
      var expires = "expires=" + d.toUTCString();
      console.info(cname + "=" + cvalue + "; " + expires);
      document.cookie = cname + "=" + cvalue + "; " + expires;
      console.info(document.cookie);
    },
    //获取cookie
    getCookie: function (cname) {
      var name = cname + "=";
      var ca = document.cookie.split(';');
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
      }
      return "";
    },
  },
  components: {
    votecontent: VoteContent,
    voteresult: VoteResult
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
